<template>
  <div>
    <van-nav-bar
      title="商品搜索"
      left-text="返回"
      nav-bar-text-color="@white"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="top-search">
      <div class="w">
        <div class="top">
          <form class="search">
            <i class="iconfont icon-magnifier"></i>
            <input type="text" placeholder="请输入关键字" v-model="keywords" class="topSearch"/>
          </form> 
        </div>
      </div>
    </div>

    <van-empty description="暂无数据~换个关键字试一试~">
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round>
        随便逛逛
      </van-button>
    </van-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$toast.success("返回到上一级");
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.search{
  width:2.7rem;
}
.topSearch{
  width: 2.7rem;
}
/deep/ .van-empty {
  margin-top: 1rem;
}
/deep/ .van-button {
  width: 1rem;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}
</style>